import React, {Component} from "react";
import { AnimateWrapper, AnimateInput } from '../style';
import Button from 'antd/lib/button';
import { Carousel } from 'antd';


class Input extends Component {
  handleFocus() {
    this.refs.input.classList.add("active")
  }

  render() {
    return (
      <AnimateWrapper>
        <Button type="primary" ghost>Button</Button>
        <AnimateInput type="text" ref="input" onFocus={this.handleFocus.bind(this)}/>
        <Carousel >
          <div><h3>1</h3></div>
          <div><h3>2</h3></div>
          <div><h3>3</h3></div>
          <div><h3>4</h3></div>
        </Carousel>
      </AnimateWrapper>

    )
  };

}

export default Input;
